/**
 * @class NX.view.drilldown.Drilldown
 */

// FIXME: Sort out where these should go, referenced by NX.controller.Drilldown

@include extjs-button-large-ui(
    $ui: 'nx-drilldown',
    $text-padding: 0,
    $color: $color-navy-blue,
    $color-over: $color-dark-cerulean,
    $color-focus: $color-dark-cerulean,
    $color-pressed: $color-cornflower,
    $color-disabled: $color-night-rider,
    $font-size: $font-size-h2,
    $line-height: $font-size-h2,
    $background-gradient: transparent,
    $background-gradient-over: transparent,
    $background-gradient-focus: transparent,
    $background-gradient-pressed: transparent,
    $background-gradient-disabled: transparent,
    $background-color: transparent,
    $background-color-over: transparent,
    $background-color-focus: transparent,
    $background-color-pressed: transparent,
    $background-color-disabled: transparent,
    $border-width: 0,
    $border-color: transparent,
    $border-color-over: transparent,
    $border-color-focus: transparent,
    $border-color-pressed: transparent,
    $border-color-disabled: transparent,
    $opacity-disabled: 1,
    $inner-opacity-disabled: 1
);

.x-btn-nx-drilldown-large {
  padding: 0 0 0 6px !important;
}

@include extjs-button-medium-ui(
    $ui: 'nx-drilldown',
    $text-padding: 0,
    $color: $color-navy-blue,
    $color-over: $color-dark-cerulean,
    $color-focus: $color-dark-cerulean,
    $color-pressed: $color-cornflower,
    $color-disabled: $color-night-rider,
    $font-size: $font-size-h4,
    $background-gradient: transparent,
    $background-gradient-over: transparent,
    $background-gradient-focus: transparent,
    $background-gradient-pressed: transparent,
    $background-gradient-disabled: transparent,
    $background-color: transparent,
    $background-color-over: transparent,
    $background-color-focus: transparent,
    $background-color-pressed: transparent,
    $background-color-disabled: transparent,
    $border-width: 0,
    $border-color: transparent,
    $border-color-over: transparent,
    $border-color-focus: transparent,
    $border-color-pressed: transparent,
    $border-color-disabled: transparent,
    $opacity-disabled: 1,
    $inner-opacity-disabled: 1
);

.x-btn-nx-drilldown-medium {
  padding: 0 2px 0 6px;
  top: 7px !important;

  .x-btn-inner {
      text-overflow: ellipsis;
      height: 20px;
  }
}

@include extjs-button-toolbar-small-ui(
    $ui: 'nx-drilldown',
    $text-padding: 0,
    $color: $color-navy-blue,
    $color-over: $color-dark-cerulean,
    $color-focus: $color-dark-cerulean,
    $color-pressed: $color-cornflower,
    $color-disabled: $color-night-rider,
    $font-size: $font-size-body,
    $background-gradient: transparent,
    $background-gradient-over: transparent,
    $background-gradient-focus: transparent,
    $background-gradient-pressed: transparent,
    $background-gradient-disabled: transparent,
    $background-color: transparent,
    $background-color-over: transparent,
    $background-color-focus: transparent,
    $background-color-pressed: transparent,
    $background-color-disabled: transparent,
    $border-color: transparent,
    $border-color-over: transparent,
    $border-color-focus: transparent,
    $border-color-pressed: transparent,
    $border-color-disabled: transparent,
    $glyph-color: $color-navy-blue,
    $opacity-disabled: 1,
    $inner-opacity-disabled: 1
);

// FIXME: Sort out where these should go, referenced by NX.controller.Drilldown

.nx-breadcrumb-separator {
  font-size: $font-size-h4;
  top: 7px !important;
  padding-left: 12px;
}

.nx-breadcrumb-icon {
  top: 9px !important;
  margin-left: 13px;
}
